<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>班级管理 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* 您原来的班级管理页面的样式可以保留或根据新布局调整 */
        .class-list table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #fff; /* 表格背景色 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 表格阴影 */
            border-radius: 8px; /* 表格圆角 */
            overflow: hidden; /* 隐藏溢出内容，配合圆角 */
        }
        .class-list th, .class-list td {
            border: 1px solid #ddd;
            padding: 12px; /* 调整内边距 */
            text-align: left;
        }
        .class-list th {
            background-color: #f2f2f2;
            font-weight: bold;
            color: #333;
        }
        .class-list tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .class-list tr:hover {
            background-color: #e9e9e9;
        }
        .actions-column a, .actions-column button {
            margin-right: 5px;
        }
        .no-classes-message {
            text-align: center;
            margin-top: 30px;
            font-size: 1.2em;
            color: #666;
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: common-header}"></div>

<div class="main-content">
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h1 class="page-title" style="margin-bottom: 0;">班级管理</h1>
            <div class="actions-bar" style="margin-bottom: 0;">
                <a th:href="@{/class/create}" class="btn btn-primary">创建班级</a>
            </div>
        </div>

        <div th:if="${successMessage}" class="alert alert-success">
            <p th:text="${successMessage}"></p>
        </div>
        <div th:if="${errorMessage}" class="alert alert-danger">
            <p th:text="${errorMessage}"></p>
        </div>

        <div class="class-list">
            <table th:if="${!#lists.isEmpty(classes)}">
                <thead>
                <tr>
                    <th>班级ID</th>
                    <th>班级名称</th>
                    <th>教师ID</th>
                    <th>学生数</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="classObj : ${classes}">
                    <td th:text="${classObj.id}">班级ID占位符</td>
                    <td th:text="${classObj.className}">班级名称占位符</td>
                    <td th:text="${classObj.teaId}">教师ID占位符</td>
                    <td th:text="${classObj.classStuNum}">学生数占位符</td>
                    <td th:text="${#dates.format(classObj.createTime, 'yyyy-MM-dd HH:mm:ss')}">创建时间占位符</td>
                    <td class="actions-column">
                        <a th:href="@{/class/{id}/students(id=${classObj.id})}" class="btn btn-info btn-sm">学生名单</a>
                    </td>
                </tr>
                </tbody>
            </table>

            <div th:if="${#lists.isEmpty(classes)}" class="no-classes-message">
                <p>暂无班级信息。</p>
            </div>
        </div> </div> </div> </body>
</html>
